<template>
  <view class="schedule-card" :style="{ backgroundColor: cardColor }" @click="handleCardClick">
    <view class="card-time">{{ formatTime(schedule.startDatetime) }}</view>
    <view class="card-title">{{ schedule.subjectName }}</view>
    <view class="card-room">{{ schedule.classRoomName }}</view>
    <view class="card-teacher">{{ schedule.teacherName }}</view>

    <!-- 状态指示器 -->
    <view v-if="schedule.status === 'draft'" class="status-badge draft">草稿</view>
    <view v-else-if="schedule.status === 'cancelled'" class="status-badge cancelled">已取消</view>
  </view>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue'
import type { ScheduleItem } from '@/types/schedule'

const props = defineProps<{
  schedule: ScheduleItem
}>()

const formatTime = (datetime: string) => {
  const date = new Date(datetime)
  return (
    date.getHours().toString().padStart(2, '0') +
    ':' +
    date.getMinutes().toString().padStart(2, '0')
  )
}

const handleCardClick = () => {
  // 这里可以添加点击事件，如编辑课程等
  uni.navigateTo({
    url: `/pages/student/studentCourse?classRoomId=${props.schedule.classRoomId}`,
  })
}

// 根据课程ID生成唯一颜色
const cardColor = computed(() => {
  if (props.schedule.color) return props.schedule.color

  const colors = ['#FF7A50', '#66D2A0', '#FFCC00', '#7CB8FF', '#FF9EBB', '#9775FA', '#9ABB73']
  const hash =
    props.schedule.id?.toString() ||
    '1'.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
  return colors[Number(hash) % colors.length]
})
</script>

<style scoped lang="scss">
.schedule-card {
  border-radius: $border-radius;
  padding: 20rpx;
  margin: 10rpx;
  color: white;
  min-height: 200rpx;
  width: 220rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: $shadow;
  transition: all 0.3s ease;
  position: relative;
}

.schedule-card:active {
  transform: scale(0.98);
}

.card-time {
  font-size: 24rpx;
  font-weight: 500;
  opacity: 0.9;
}

.card-title {
  font-size: 30rpx;
  font-weight: 700;
  margin: 10rpx 0;
  flex: 1;
  display: flex;
  align-items: center;
  line-height: 1.2;
}

.card-room {
  font-size: 24rpx;
  opacity: 0.9;
}

.card-teacher {
  font-size: 24rpx;
  opacity: 0.8;
  align-self: flex-end;
  margin-top: 5rpx;
}

.status-badge {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  padding: 4rpx 8rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  font-weight: 500;

  &.draft {
    background-color: rgba(255, 255, 255, 0.3);
  }

  &.cancelled {
    background-color: rgba(255, 77, 79, 0.8);
  }
}
</style>
